<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="checkbox" name="select-all" onclick="checkboxSelectAll()">全选<br>
<input type="checkbox" name="option">1<br>
<input type="checkbox" name="option">2<br>
<input type="checkbox" name="option">3<br>
<input type="button" onclick="selectAll()" value="全选">
<input type="button" onclick="selectNone()" value="全不选">
<input type="button" onclick="reverseSelect()" value="反选">
<script>
    var allSelect = document.getElementsByName("select-all");
    var option = document.getElementsByName("option");
    var show = document.getElementById("show");

    for (let i = 0; i < option.length; i++) {
        option[i].onclick = checkboxSelectAllStatus;
    }


    function checkboxSelectAll() {
        if (allSelect[0].checked) {
            selectAll();
        } else {
            selectNone();
        }
    }

    function checkboxSelectAllStatus() {
        for (let i = 0; i < option.length; i++) {
            if (!option[i].checked) {
                allSelect[0].checked = false;
                break;
            } else {
                allSelect[0].checked = true;
            }
        }
    }

    function selectAll() {
        for (let i = 0; i < option.length; i++) {
            option[i].checked = true;
        }
        allSelect[0].checked = true;
    }

    function selectNone() {
        for (let i = 0; i < option.length; i++) {
            option[i].checked = false;
        }
        allSelect[0].checked = false;
    }

    function reverseSelect() {
        for (let i = 0; i < option.length; i++) {
            if (option[i].checked) {
                option[i].checked = false;
            } else {
                option[i].checked = true;
            }
        }
        checkboxSelectAllStatus();
    }
</script>
</body>
</html>